<template>
  <div class="BusinessInsight">
    <!--权限弹框 已开发模块-->
    <el-dialog class="perssionDialog"
               :visible.sync="perssionDialog"
               width="500px"
               center>
      <el-row class="perssionDialogInfo">
        <el-col :span="12" style="height:200px;">
          <img src="../../../static/img/PerssionImg.png" alt="">
        </el-col>
        <div class="perssionCont">
          <div class="title">{{$t('Searchlight.perssionDialog.authorization.title')}}</div>
          <div class="cont">{{$t('Searchlight.perssionDialog.authorization.subTitle')}}</div>
          <router-link to='/guide' class="perssion-link">https://cbitest.lenovo.com/?permanent#/guide</router-link>
        </div>
      </el-row>
    </el-dialog>
    <!--权限弹框 建设中-->
    <el-dialog class="perssionDialog constructionDialog"
               :visible.sync="constructionDialog"
               width="500px"
               center>
      <div class="perssionDialogInfo" style="padding:20px 0 34px; text-align: center;">
        <div class="title" style="color:#333;margin-bottom: 30px;">{{$t('Searchlight.perssionDialog.construction')}}</div>
        <img src="../../../static/img/ConstructionImg.png" alt="">
      </div>
    </el-dialog>
    <el-card class="top-box">
      <div class="title">{{$t('route.BussinessOperation')}}</div>
      <div class="img-info">
        <!--<img src="../../../static/img/BusinessInsightEN.png" alt="">-->
        <img :src="tabImg">
      </div>
    </el-card>
    <el-row :gutter="20" class="bottom-box">
      <el-col :span="8">
        <el-card class="column">
          <div class="title">{{$t('Searchlight.BussinessInsight.column1.title')}}</div>
          <!--<div class="question">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at deleniti dolorum et eveniet natus quod recusandae rem rerum unde?</div>-->
          <div class="cont">{{$t('BusinessInsight.column1.cont')}}</div>
          <div class="question">{{$t('BusinessInsight.question')}}</div>
          <div class="perssion-link" v-for="item in $t('Searchlight.BussinessInsight.column1.links')" :key="item.link"
               @click="showConstructionDialog1(item.link)">{{item.link}}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="column">
          <div class="title">{{$t('Searchlight.BussinessInsight.column2.title')}}</div>
          <!--<div class="question">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at deleniti dolorum et eveniet natus quod recusandae rem rerum unde?</div>-->
          <div class="cont">{{$t('BusinessInsight.column2.cont')}}</div>
          <div class="question">{{$t('BusinessInsight.question')}}</div>
          <div class="perssion-link"
               @click="showConstructionDialog2(item.link)"
               v-for="item in $t('Searchlight.BussinessInsight.column2.links')" :key="item.link">{{item.link}}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="column">
          <div class="title">{{$t('Searchlight.BussinessInsight.column3.title')}}</div>
          <!--<div class="question">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at deleniti dolorum et eveniet natus quod recusandae rem rerum unde?</div>-->
          <div class="cont">{{$t('BusinessInsight.column3.cont')}}</div>
          <div class="question">{{$t('BusinessInsight.question')}}</div>
          <div class="perssion-link"
               @click.stop="showConstructionDialog"
               v-for="item in $t('Searchlight.BussinessInsight.column3.links')" :key="item.link">{{item.link}}</div>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  import {mapGetters} from "vuex";
  export default {
    name: "BusinessInsight",
    data(){
      return {
        perssionDialog: false,
        constructionDialog: false,
        tabImg: '',
        imgEN:'../../../static/img/BusinessInsightEN.png',
        imgCH:'../../../static/img/BusinessInsightCH.png'
      }
    },
    computed: {
      ...mapGetters(['language'])
    },
    watch: {
      language() {
        this.tabImage()
      }
    },
    methods:{
      tabImage(){
        if(this.language === 'en'){
          this.tabImg = this.imgEN
        }else if (this.language === 'zh') {
          this.tabImg = this.imgCH
        }
      },
      showConstructionDialog() {
        this.constructionDialog = true
      },
      showConstructionDialog1(item) {
        let userMenus = JSON.parse(sessionStorage.getItem('userMenus'))
        let activeMenus = item.replace(/\s/ig,'')
        if(activeMenus === '招投标机会') {
          activeMenus = 'Bidding'
        }
        if(activeMenus === '客户画像') {
          activeMenus = 'CustomerProfile'
        }
        if(userMenus.indexOf(activeMenus) !== -1 || userMenus[0].toLowerCase() === 'all') {
          // 临时新增模块跳转处理
          if(activeMenus === 'Bidding'){
            this.$router.push({path: `/BusinessInsight/Bidding`})
          }else if(activeMenus === 'CustomerProfile'){
            this.$router.push({path: `/InfoRetrieval/CustomerProfile`})
          } else{
            this.constructionDialog = true
          }
        }else{
          this.constructionDialog = true
        }
      },
      showConstructionDialog2(item) {
        let userMenus = JSON.parse(sessionStorage.getItem('userMenus'))
        let activeMenus = item.replace(/\s/ig,'')
        if(activeMenus === '产品配置') {
          activeMenus = 'ProductConfiguration'
        }
        if(activeMenus === '销售预测'){
          activeMenus = 'SalesPrediction'
        }
        if(userMenus.indexOf(activeMenus) !== -1 || userMenus[0].toLowerCase() === 'all') {
          // 临时新增模块跳转处理
          this.$router.push({path: `/BusinessInsight/${activeMenus}`})
        }else{
          this.constructionDialog = true
        }
      }
    },
    mounted() {
      this.tabImage()
    }
  }
</script>

<style lang="scss" scoped>
  .BusinessInsight{
    padding: 20px 46px;
    .title{
      font-family: OpenSansShin;
      font-weight:bold;
      font-size:20px;
      color:#333;
    }
    .question{
      font-family: OpenSansShin;
      font-weight:bold;
      font-size:14px;
      color:#666;
      margin-top:20px;
      height:19px;
    }
    .cont{
      font-size:14px;
      color:#7c8694;
      line-height:20px;
      margin-top:20px;
      height:120px;
    }
    .top-box{
      .img-info{
        margin-top:5px;
        text-align:center;
        img{
          width:96%;
        }
      }
    }
    .bottom-box{
      margin-top:20px;
      .title{
        color:#ff5b00;
      }
      .column{
        min-height:390px;
        overflow: hidden;
        .perssion-link{
          margin-top:24px;
          color:#7c8694;
          font-size: 12px;
          cursor: pointer;
          text-decoration: underline;
        }
       .question{
         color: #4dcfa3;
       }
       .question + .perssion-link{
         margin-top:20px;
       }
      }

    }
    .perssionDialog{
      .perssionDialogInfo{
        .title{
          font-size:20px;
          font-weight:bold;
        }
        .dialogImg{
          position:relative;
          height:200px;
          background-size:cover;
        }
        .perssionCont{
          color:#333;
          position:absolute;
          right:25px;
          top:50%;
          transform: translateY(-50%);
          .title{
            color:#333;
          }
          .cont{
            margin-right:4px;
            font-size:12px;
            color:#333;
          }
          .perssion-link{
            font-size:12px;
            color:#0090e9;
            display:inline-block;
            border-bottom:2px solid #0090e9;
          }
        }
      }
    }
  }
</style>
